<#include "common/_layout.html"/>
<@layout>
<section id="main-slider" class="no-margin">
    <div class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">

            <div class="item active" style="background-image: url(${CPATH}${OPTION('banner_img_1')!})">
                <!--<div class="container">-->
                    <!--<div class="row slide-margin">-->
                        <!--<div class="col-sm-6">-->
                            <!--<div class="carousel-content">-->
                                <!--<h1 class="animation animated-item-1 banner-text">${OPTION('banner_title_1')!}</h1>-->
                                <!--<h2 class="animation animated-item-2 " style="color: #c52d2f">${OPTION('banner_text_1')!}</h2>-->
                                <!--<a class="btn-slide animation animated-item-3" href="${CPATH}/${OPTION('banner_url_1')!}">更多</a>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="col-sm-6 hidden-xs animation animated-item-4">-->
                            <!--<div class="slider-img">-->
                                <!--<img src="${CPATH}${OPTION('banner_pro_1')!}" class="img-responsive banner-img">-->
                            <!--</div>-->
                        <!--</div>-->

                    <!--</div>-->
                <!--</div>-->
            </div><!--/.item-->

            <div class="item" style="background-image: url(${CPATH}${OPTION('banner_img_2')!})">
                <!--<div class="container">-->
                    <!--<div class="row slide-margin">-->
                        <!--<div class="col-sm-6">-->
                            <!--<div class="carousel-content">-->
                                <!--<h1 class="animation animated-item-1 banner-text">${OPTION('banner_title_2')!}</h1>-->
                                <!--<h2 class="animation animated-item-2 " style="color: #c52d2f">${OPTION('banner_text_2')!}</h2>-->
                                <!--<a class="btn-slide animation animated-item-3" href="${CPATH}/${OPTION('banner_url_2')!}">更多</a>-->
                            <!--</div>-->
                        <!--</div>-->

                        <!--<div class="col-sm-6 hidden-xs animation animated-item-4">-->
                            <!--<div class="slider-img">-->
                                <!--<img src="${CPATH}${OPTION('banner_pro_2')!}" class="img-responsive banner-img">-->
                            <!--</div>-->
                        <!--</div>-->

                    <!--</div>-->
                <!--</div>-->
            </div><!--/.item-->

            <div class="item" style="background-image: url(${CPATH}${OPTION('banner_img_3')!})">
                <!--<div class="container">-->
                    <!--<div class="row slide-margin">-->
                        <!--<div class="col-sm-6">-->
                            <!--<div class="carousel-content">-->
                                <!--<h1 class="animation animated-item-1 banner-text">${OPTION('banner_title_3')!}</h1>-->
                                <!--<h2 class="animation animated-item-2"  style="color: #c52d2f">${OPTION('banner_text_3')!}</h2>-->
                                <!--<a class="btn-slide animation animated-item-3" href="${CPATH}/${OPTION('banner_url_3')!}">更多</a>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="col-sm-6 hidden-xs animation animated-item-4">-->
                            <!--<div class="slider-img">-->
                                <!--<img src="${CPATH}${OPTION('banner_pro_3')!}" class="img-responsive banner-img">-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            </div><!--/.item-->
        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</section><!--/#main-slider-->

<section id="feature" >
    <div class="container">
        <div class="center wow fadeInDown">
            <h2>${i18n.get('webtitle')}</h2>
            <p class="lead" >${i18n.get('abstract')}</p>
        </div>
        <div class="row">
            <div class="features">
                <@jp.indexPage module="feature"  pagesize="6"  hasThumbnail="true" ordeyBy="id">
                <#list page.getList() as content>
                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa ${content.getMetadata('class')!}"></i>
                            <h2>${content.title} </h2>
                            <h3>${content.summary}</h3>
                        </div>
                    </div>
                </#list>
            </@jp.indexPage>
            </div><!--/.services-->
        </div><!--/.row-->
    </div><!--/.container-->
</section><!--/#feature-->

<section id="services" class="service-item">
    <div class="container">
        <div class="center wow fadeInDown">
            <h2>${i18n.get('product_show')}</h2>
            <!--<p class="lead">${i18n.get('product_show')}</p>-->
        </div>
        <div class="row">
            <@jp.indexPage module="product"  pagesize="6"  hasThumbnail="true">
                <#list page.getList() as content>
                    <div class="col-sm-6 col-md-4">
                        <div class="media services-wrap wow fadeInDown" style="height: 240px">
                            <div class="pull-left">
                                <a href="${content.url}"><img class="img-responsive" src="${content.thumbnail!}" style="width: 120px;height:120px;overflow:hidden;"></a>
                            </div>
                            <div class="media-body">
                                <a href="${content.url}"><h3 class="media-heading"  href="${content.url}">${content.title}</h3></a>
                                <p style="height: 100px"  href="${content.url}">${content.summary!}</p>
                            </div>
                        </div>
                    </div>
                </#list>
            </@jp.indexPage>
        </div><!--/.row-->
    </div><!--/.container-->
</section><!--/#services-->

</@layout>